<template>
    <div id="UserInfo" style="width: 100%;height: 100%;">
      <el-container>
        <el-main style="height: 100%;padding: 0">
          <el-table
            :data="userInfo"
            stripe
            style="width: 100%;"
            :row-style="tableRowStyle">
            <el-table-column prop="movieImg" label="游戏海报">
              <template slot-scope="scope">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.headImg" alt="" style="width: 170px;height: 170px;border-radius: 6px">
                  <img slot="reference" :src="scope.row.headImg" style="width: 35px;height: 35px;border-radius: 6px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="userId" label="用户Id" >
            </el-table-column>
            <el-table-column prop="nickname" label="用户昵称" >
            </el-table-column>
            <el-table-column  prop="rootCode" label="账户权限">
              <template slot-scope="scope" >
                <p v-if="scope.row.rootCode === 2" style="color: #409eff">超级管理员</p>
                <p v-if="scope.row.rootCode === 1" style="color: #409eff">管理员</p>
                <p v-if="scope.row.rootCode === 0" >普通用户</p>
                <p v-if="scope.row.rootCode === 400" style="color: #ff4040">封禁中</p>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="changeRootUp(scope.row)" v-if="scope.row.rootCode !== 1 && scope.row.rootCode !== 2" type="text" size="small">设为管理员</el-button>
                <el-button @click="changeRootDown(scope.row)" v-if="scope.row.rootCode === 1" type="text" size="small">取消管理员</el-button>
                <el-button @click="changeCloseUp(scope.row)" v-if="scope.row.rootCode !== 400 && scope.row.rootCode !==1 && scope.row.rootCode !== 2" type="text" size="small">封禁用户</el-button>
                <el-button @click="changeCloseDown(scope.row)" v-if="scope.row.rootCode === 400" type="text" size="small">解除封禁</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
</template>

<script>
    import api from "../../model/api";

    export default {
        name: "UserInfo",
      data(){
          return{
            userInfo:[],
            value:'1',
          }
      },

      created(){
        this.getUserInfo()
      },
      methods:{
          getUserInfo(){
            api.getUserInfoAll().then(res=>{
              this.userInfo = res.data
            })
          },
        tableRowStyle({ row, rowIndex }) {
          return 'background-color: #F7F6Fd;'
        },
        // 修改table header的背景色
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return 'background-color: lightblue;color: #303133;font-weight: 500;font-size: 20px;' //font-size: 20px;为字体大小设置
          }
        },
        async changeRootUp(val) {
          console.log(val)
          const userArr = {
            userId: val.userId,
            rootCode: 1,
          }
          const {data:res} = await this.$axios.post('v1/updateUserRoot',userArr)
          if(res.code === 200){
            this.$message.success("管理员设置成功")
            this.getUserInfo()
          }
        },
        async changeRootDown(val) {
          console.log(val)
          const userArr = {
            userId: val.userId,
            rootCode: 0,
          }
          const {data:res} = await this.$axios.post('v1/updateUserRoot',userArr)
          if(res.code === 200){
            this.$message.success("取消管理员成功")
            this.getUserInfo()
          }
        },
       async changeCloseDown(val){
          console.log(val)
          const userArr = {
            userId: val.userId,
            rootCode: 0,
          }
          const {data:res} = await this.$axios.post('v1/updateUserRoot',userArr)
         if(res.code === 200){
           this.$message.success("解除封禁成功")
           this.getUserInfo()
         }

        },
        async changeCloseUp(val){
          console.log(val)
          const userArr = {
            userId: val.userId,
            rootCode: 400,
          }
          const {data:res} = await this.$axios.post('v1/updateUserRoot',userArr)
          if(res.code === 200){
            this.$message.success("封禁成功")
            this.getUserInfo()
          }

        }


      }
    }
</script>

<style scoped>

</style>
